<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
 lang="en" dir="ltr">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../codebase/default.css" type="text/css" media="screen" title="no title" charset="utf-8"><title>
    dhtmlxtree:searching_and_sorting_in_tree    [Skin test wiki]
  </title></head>

<body>
<div class="dokuwiki">
  
  <div class="stylehead">

    <div class="header">
    <a class="logo" href="http://dhtmlx.com" title="DHTMLX Documentation homepage"></a>
    <span class="tittle-dhtmlx">DHTMLX Docs & Samples Explorer</span>

    <div class="search-field">
        <form action="http://dhtmlx.com/dhxdocs/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit"></button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>    </div>
        <div class="buttons">
                <a class="doc"></a>
                <a title="DHTMLX Samples homepage" href="../samples.html" class="sample"/></a>
        </div>
     <!-- <div class="pagename">
        [[<a href="#"  title="Backlinks">dhtmlxtree:searching_and_sorting_in_tree</a>]]
      </div>
      <div class="logo">
        <a href="/dhtmlx/_lab/wiki/doku.php"  name="dokuwiki__top" id="dokuwiki__top" accesskey="h" title="[H]">Skin test wiki</a>      </div>

      <div class="clearer"></div>-->
        
    </div>

    
<!--   <div class="bar" id="bar__top">
      <div class="bar-left" id="bar__topleft">
                <form class="button btn_revs" method="get" action="http://dhtmlx.com/dhxdocs/doku.php"><div class="no"><input type="hidden" name="do" value="revisions" /><input type="hidden" name="id" value="dhtmlxtree:searching_and_sorting_in_tree" /><input type="submit" value="Old revisions" class="button" accesskey="o" title="Old revisions [O]" /></div></form>      </div>

      <div class="bar-right" id="bar__topright">
        <form class="button btn_recent" method="get" action="http://dhtmlx.com/dhxdocs/doku.php"><div class="no"><input type="hidden" name="do" value="recent" /><input type="hidden" name="id" value="dhtmlxtree:searching_and_sorting_in_tree" /><input type="submit" value="Recent changes" class="button" accesskey="r" title="Recent changes [R]" /></div></form>        <form action="http://dhtmlx.com/dhxdocs/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit"></button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>&nbsp;
      </div>

      <div class="clearer"></div>
    </div> -->

<!--        <div class="breadcrumbs">
      <span class="bchead">Trace:</span> <span class="bcsep">&raquo;</span> <span class="curid"><a href="/dhtmlx/_lab/wiki/doku.php?id=dhtmlxtree:searching_and_sorting_in_tree"  class="breadcrumbs" title="dhtmlxtree:searching_and_sorting_in_tree">searching_and_sorting_in_tree</a></span>    </div>
    -->

    
  </div>
  
  
  <div class="page">
    <!-- wikipage start -->
    <!-- TOC START -->
<div class="toc">
<div class="tocheader toctoggle" id="toc__header">Table of Contents</div>
<div id="toc__inside">

<ul class="toc">
<li class="clear">

<ul class="toc">
<li class="level2"><div class="li"><span class="li"><a href="#searching_and_sorting_in_tree" class="toc">Searching and Sorting in Tree</a></span></div>
<ul class="toc">
<li class="level3"><div class="li"><span class="li"><a href="#searching_in_tree" class="toc">Searching in Tree</a></span></div></li>
<li class="level3"><div class="li"><span class="li"><a href="#sorting_in_tree" class="toc">Sorting in Tree</a></span></div></li></ul>
</li></ul>
</li></ul>
</div>
</div>
<!-- TOC END -->

<p>
<div class='backlinks'><div class='backlink last_backlink'><img src="icons___file.gif"  class="media" alt="" /><a href="../index.html" class="wikilink1" title="start">Index</a></div><div class='arrow'></div><div class='backlink last_backlink'><img src="icons___tree.gif"  class="media" alt="" /><a href="index.html" class="wikilink1" title="dhtmlxtree:toc">dhtmlxtree</a></div><div class='arrow'></div><div class='backlink'><span class="curid"><a href="dhtmlxtree___searching_and_sorting_in_tree.html" class="wikilink1" title="dhtmlxtree:searching_and_sorting_in_tree">  Searching and Sorting in Tree  </a></span></div></div>

</p>

<h2><a name="searching_and_sorting_in_tree" id="searching_and_sorting_in_tree">Searching and Sorting in Tree</a></h2>
<div class="level2">

</div>

<h3><a name="searching_in_tree" id="searching_in_tree">Searching in Tree</a></h3>
<div class="level3">

</div>

<h4><a name="enabling_auto_search" id="enabling_auto_search">Enabling Auto Search</a></h4>
<div class="level4">

<p>
First, the meaning of auto search should be explained. When auto selected is switched on, the user can just select any item in the tree and start typing. The tree item, which name
is the closes to the typed one, will be selected. Restarting search is done by using the backspace button.
Auto search can be enabled only after enabling keyboard navigation:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_enablekeyboardnavigation.html'><b><span class="me1">enableKeyboardNavigation</span></b></a><span class="br0">&#40;</span><span class="kw2">true</span><span class="br0">&#41;</span>;
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_enablekeysearch.html'><b><span class="me1">enableKeySearch</span></b></a><span class="br0">&#40;</span><span class="kw2">true</span><span class="br0">&#41;</span>; <span class="co1">// false to disable</span>
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

This method should be called before any of the data loading methods.
</p>

</div>

<h4><a name="searching_tree" id="searching_tree">Searching Tree</a></h4>
<div class="level4">

<p>
The tree can be searched from script with the help of methods findItem() and findItemIdByLabel(). The methods differ in one thing: whether the searched item will be selected and focused when found or not:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_finditem.html'><b><span class="me1">findItem</span></b></a><span class="br0">&#40;</span>searchStr<span class="sy0">,</span> direction<span class="sy0">,</span> top<span class="br0">&#41;</span>; <span class="co1">// the item will be selected and focused when found</span>
            <span class="co1">// or</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_finditemidbylabel.html'><b><span class="me1">findItemIdByLabel</span></b></a><span class="br0">&#40;</span>searchStr<span class="sy0">,</span> direction<span class="sy0">,</span> top<span class="br0">&#41;</span>; <span class="co1">// the item will not be selected and focused when found</span>
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

The parameters of both these methods are:
</p>
<ul>
<li class="level1"><div class="li">  searchStr - the search query;</div>
</li>
<li class="level1"><div class="li">  direction(false|true) - direction of the search, from the top to the bottom (false), and vice versa (true);</div>
</li>
<li class="level1"><div class="li">  top(true|false) - start searching from the top (true) or start searching from the currently selected item (false).</div>
</li>
</ul>

</div>

<h3><a name="sorting_in_tree" id="sorting_in_tree">Sorting in Tree</a></h3>
<div class="level3">

</div>

<h4><a name="sorting_tree" id="sorting_tree">Sorting Tree</a></h4>
<div class="level4">

<p>
dhtmlxTree allows its users to sort the tree in ASC or DES orders:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_sorttree.html'><b><span class="me1">sortTree</span></b></a><span class="br0">&#40;</span>itemId<span class="sy0">,</span> oder<span class="sy0">,</span> all_levels<span class="br0">&#41;</span>;
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

The user should indicate the following parameters:
</p>
<ul>
<li class="level1"><div class="li">  itemId - id of the node sorting starts from;</div>
</li>
<li class="level1"><div class="li">  oder(ASC|DES) - sorting order;</div>
</li>
<li class="level1"><div class="li">  all_levels(true|false) - sorting the tree by all levels (true), or by current level.</div>
</li>
</ul>

</div>

<h4><a name="custom_defined_sorting" id="custom_defined_sorting">Custom Defined Sorting</a></h4>
<div class="level4">

<p>
The user can set custom sort function. The function should have two parameters - id_of_item1,id_of_item2. For example:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
            <span class="co1">//define the comparator (in our case it compares the second words in labels)</span>
        <span class="kw2">function</span> mySortFunc<span class="br0">&#40;</span>idA<span class="sy0">,</span>idB<span class="br0">&#41;</span><span class="br0">&#123;</span>
            a<span class="sy0">=</span><span class="br0">&#40;</span>tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_getitemtext.html'><b><span class="me1">getItemText</span></b></a><span class="br0">&#40;</span>idA<span class="br0">&#41;</span><span class="br0">&#41;</span>.<span class="me1">split</span><span class="br0">&#40;</span><span class="st0">&quot; &quot;</span><span class="br0">&#41;</span><span class="br0">&#91;</span><span class="nu0">1</span><span class="br0">&#93;</span>||<span class="st0">&quot;&quot;</span>;
            b<span class="sy0">=</span><span class="br0">&#40;</span>tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_getitemtext.html'><b><span class="me1">getItemText</span></b></a><span class="br0">&#40;</span>idB<span class="br0">&#41;</span><span class="br0">&#41;</span>.<span class="me1">split</span><span class="br0">&#40;</span><span class="st0">&quot; &quot;</span><span class="br0">&#41;</span><span class="br0">&#91;</span><span class="nu0">1</span><span class="br0">&#93;</span>||<span class="st0">&quot;&quot;</span>;
            <span class="kw1">return</span> <span class="br0">&#40;</span><span class="br0">&#40;</span>a<span class="sy0">&amp;</span>amp;gt;b<span class="br0">&#41;</span><span class="sy0">?</span><span class="nu0">1</span><span class="sy0">:-</span><span class="nu0">1</span><span class="br0">&#41;</span>;
        <span class="br0">&#125;</span>
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

Then setCustomSortFunction() method should be called taking the name of the function as the incoming parameter:

</p>
<pre class="code javascript">    <span class="sy0">&lt;</span>script<span class="sy0">&gt;</span>
            <span class="co1">//attach the comparator to the tree</span>
        tree.<a href='dhtmlxtree___api_method_dhtmlxtreeobject_setcustomsortfunction.html'><b><span class="me1">setCustomSortFunction</span></b></a><span class="br0">&#40;</span>mySortFunc<span class="br0">&#41;</span>;
    <span class="sy0">&lt;/</span>script<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

It should be noted that if custom comparator is specified, sortTree() method will use it for sorting.
</p>

</div>

    <!-- wikipage stop -->
  </div>

  <div class="clearer">&nbsp;</div>

  
  <div class="stylefoot">

    <div class="meta">
      <div class="user">
              </div>
     <!-- <div class="doc">
        dhtmlxtree/searching_and_sorting_in_tree.txt &middot; Last modified: 2009/07/30 12:56 (external edit)      </div>
    </div>-->

   
    <!--<div class="bar" id="bar__bottom">-->
      <!--<div class="bar-left" id="bar__bottomleft">-->
        <!---->
        <!--<form class="button btn_revs" method="get" action="http://dhtmlx.com/dhxdocs/doku.php"><div class="no"><input type="hidden" name="do" value="revisions" /><input type="hidden" name="id" value="dhtmlxtree:searching_and_sorting_in_tree" /><input type="submit" value="Old revisions" class="button" accesskey="o" title="Old revisions [O]" /></div></form>-->
      <!--</div>-->
      <!--<div class="bar-right" id="bar__bottomright">-->
        <!---->
        <!---->
        <!---->
        <!---->
        <!--<form class="button btn_login" method="get" action="http://dhtmlx.com/dhxdocs/doku.php"><div class="no"><input type="hidden" name="do" value="login" /><input type="hidden" name="sectok" value="f8e4d445461051d907fabb0e5ee9021a" /><input type="hidden" name="id" value="dhtmlxtree:searching_and_sorting_in_tree" /><input type="submit" value="Login" class="button" title="Login" /></div></form>-->
        <!--<form class="button btn_index" method="get" action="http://dhtmlx.com/dhxdocs/doku.php"><div class="no"><input type="hidden" name="do" value="index" /><input type="hidden" name="id" value="dhtmlxtree:searching_and_sorting_in_tree" /><input type="submit" value="Index" class="button" accesskey="x" title="Index [X]" /></div></form>-->
        <!--<a class="nolink" href="#dokuwiki__top"><input type="button" class="button" value="Back to top" onclick="window.scrollTo(0, 0)" title="Back to top" /></a>&nbsp;-->
      <!--</div>-->
      <!--<div class="clearer"></div>-->
    <!--</div>-->

  </div>

  

</div>

<div class="footerinc">


</div>

<div class="no"><img src="/dhtmlx/_lab/wiki/lib/exe/indexer.php?id=dhtmlxtree%3Asearching_and_sorting_in_tree&amp;1257950447" width="1" height="1" alt=""  /></div>
     <div class="footer">
        <div class="footer-logo"></div>
        <div class="copyright">Copyright © 1998-2009 DHTMLX LTD.<br />All rights reserved.</div>
            	    </div>
</body>
</html>
